import React, { useEffect, useState } from 'react';
import { message,Button, Table,Row,Col,Image,Tag,Space,Popconfirm   } from 'antd';
import { DeleteOutlined, FormOutlined,PlusOutlined } from '@ant-design/icons'
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import request, { baseUrl } from '../../utils/request';
import { useCallback } from 'react';

const List = ()=>{
    const [urlparams,seturlparams] = useSearchParams()
    const [params,setparams] =useState({
        page:Number(urlparams.get('page'))||1,
        size:Number(urlparams.get('size'))||10
    })
    
    const navigate = useNavigate()
    
    const [total,settotal] = useState(0)
    
    const [datalist,setDatalist]=useState([]);
    
    const getData = async()=>{
        const {data} = await request.get('/books/list?limit=100', {
            params,
        })
        setDatalist(data.data[0])
        settotal(data.data[1])
    }
    
    const pagination = {
        total,
        current: params.page,
        pageSize: params.size,
        size: 'small',
        onChange(page, size) {
            setparams({
                page,
                size
            })
            
            seturlparams({
                page,
                size
            })
        }
    }
    
    useEffect(()=>{
        getData()
    },[])
    
    const rowSelection = {
        onChange(selectedRowKeys){
            setSelectIds(selectedRowKeys)
        }
    }
    
    const editItem = useCallback((id)=>
    navigate ('/manage/book_change/'+id)
    ,[])

    const removeItem = useCallback(async(id)=>{
        const data = await request.post('/books/remove/'+id)
        if (data.data.code === 200) {
            message.success('数据删除成功')
            getData()
        }
    },[datalist])

    const [selectIds, setSelectIds] = useState([])
    const removeItems = useCallback(async () => {
        if(selectIds.length === 0){
            return message.warning('请选择删除的数据');
        }

        const { data } = await request.post('/books/remove', {
            data: {
                ids: selectIds
            }
        })

        if (data.code === 200) {
            message.success('数据删除成功')
            getData()
        }
    }, [selectIds])

    const columns = [
        {
            title: '#',
            key:'id',
            render(text, record,index){
                return index+1
            }
        },
        {
            title: '小说封面',
            dataIndex: 'pic',
            width:120,
            key:'pic',
            render:(text,record,index)=>{
                return <Image src={text} />
            }
        },
        {
            title: '小说信息',
            dataIndex: 'book',
            key:'book',
            render(text,item){
                return(
                    <>
                    <h4>{text}</h4>
                    <p className='author'>作者：<span>{item.author}</span></p>
                    <p>
                        <Tag color='success'>{item.booktype}</Tag>
                        <Tag color='red'>热度:{item.hot}</Tag>
                    </p>
                </>
            )
        }
    },
    {
        title: '小说简介',
        dataIndex: 'brief',
        width: 700,
        render(text,item){
            return(
                <>
                    <p className='author'><span>{item.brief}</span></p>
                </>
            )
        }
    },
    {
        title:'操作',
        dataIndex: 'id',
        width: 100,
        render(id) {
            return (
                // <React.Fragment>
                <Space>
                        <Button ghost type='primary' icon={<FormOutlined />} size="small" onClick={editItem.bind(null,id)}></Button>
                        <Popconfirm 
                        title="确认删除"
                        onConfirm={removeItem.bind(null,id)}
                        >
                            <Button danger icon={<DeleteOutlined />} size="small" ></Button>
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ];

    return (
        <div>
            <Row gutter={20}>
                <Col span={8}>
                    <Button type='primary' icon={<PlusOutlined />} onClick={()=>{
                        navigate('/manage/book_add')
                    }}>添加</Button>
                </Col>
                <Col span={16} className='text-right'>
                        <Popconfirm title="确认删除" onConfirm={removeItems}>
                            <Button danger icon={<DeleteOutlined />}>批量删除</Button>
                        </Popconfirm>
                </Col>
            </Row>
            <Table 
            rowSelection={rowSelection}
            columns={columns} 
            dataSource={datalist} 
            rowKey="id"
            pagination={pagination}
            />
        </div>
    );
}

export default List;